<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="编号" prop="id" width="200px"></el-table-column>
    <el-table-column label="题型" prop="questionType">
      <template slot-scope="{ row }">
        <span>{{ row.questionType | format }}</span>
      </template>
    </el-table-column>
    <el-table-column label="题型编号" prop="questionIDs" width="200px">
      <template slot-scope="{ row }">
        <div v-for="(item, index) in row.questionIDs" :key="index">
          <a style="color: #4f99ff" href="" @click.prevent="openDialog(item)">{{ item.number }}</a>
        </div>
      </template>
    </el-table-column>
    <el-table-column v-for="item in headList" :key="item.id" :prop="item.props" :label="item.label"> </el-table-column>
    <el-table-column label="操作" prop="操作">
      <i class="el-icon-delete" @click="del(row)" slot-scope="{ row }"></i>
    </el-table-column>
  </el-table>
</template>

<script>
import { questionType } from '@/api/hmmm/constants'
export default {
  props: {
    headList: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  filters: {
    format (value) {
      let str = ''
      questionType.forEach((item) => {
        if (item.value === +value) {
          str = item.label
        }
      })
      return str
    }
  },
  methods: {
    // 删除
    del (row) {
      this.$emit('del', row)
    },
    // 打开试题预览对话框
    openDialog (scope) {
      // console.log(scope)
      // console.log(this.$parent.$parent)
      // this.$parent.$parent.dialogVisible = true
      this.$emit('openDialog', scope)
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon-delete {
  display: block;
  line-height: 30px;
  text-align: center;
  width: 30px;
  height: 30px;
  border: 1px solid #f56c6c;
  border-radius: 50%;
  color: #f56c6c;
  &:hover {
    color: white;
    background-color: #f56c6c;
  }
}
</style>
